<template>
  <div class="title-box">
    <div class="title">
      <svg-icon
        :name="iconName"
        style="width: 18px; height: 18px; margin-right: 9px"
      />
      <span>{{ name }}</span>
    </div>
  </div>
</template>
<script setup>
const prop = defineProps({
  name: {
    type: String,
    default: "",
  },
  iconName: {
    type: String,
    default: "",
  },
  hasIcon: {
    type: Boolean,
    default: false,
  },
});
</script>
<style lang="scss" scoped>
.title-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  // border-bottom: 1px solid #079d79;
  .title {
    padding-bottom: 9px;
    position: relative;
    display: flex;
    align-items: center;
    font-size: 18px;
    font-weight: 700;
    padding-right: 40px;
    ::after {
      content: "";
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 1px; /* 根据需要调整渐变条的高度 */
      background: linear-gradient(
        to right,
        rgba(7, 157, 121, 0.5) 0%,
        rgba(143, 255, 228, 0.5) 30%,
        rgba(7, 157, 121, 0.5) 80%,

        rgba(33, 33, 33, 0.41) 100%
      );
    }
  }
}
</style>
